<template>
  <div class="app-container">
    <div class="row justify-content-md-center">
      <div class="col col-2">
        <router-link to="/home" class="logo">
          <img src="./../../images/logo1.jpg" alt="logo" title="MDPI Open Access Journals" style="width: 100%; max-width: 150px !important; height: 70px;margin-left: 15px;">
        <img src="./../../images/logo2.jpg" alt="logo" title="MDPI Open Access Journals" style="width: 100%; max-width: 150px !important; height: 70px;">
        </router-link>
      </div>
    </div>
    <div>
      <el-row>
        <el-col :span="24">
          <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="个人资料" name="userData">
              <user-data></user-data>
            </el-tab-pane>
            <el-tab-pane label="投稿" name="sendManuscript">
              <!-- <send-manuscript></send-manuscript> -->
              <div class="app-container" v-loading="pageLoading">
                <div class="form-container">
                  <el-form :model="postForm" ref="postForm" :rules="rules">
                    <el-form-item label="Email" prop="email">
                      <el-input v-model="postForm.email" readonly></el-input>
                    </el-form-item>
                    <el-form-item label="文字描述" prop="text">
                      <el-input type="textarea" v-model="postForm.text"></el-input>
                    </el-form-item>
                    <el-form-item label="文章类别" prop="title">
                      <el-select v-model="postForm.title">
                        <el-option
                          v-for="item in titleOptions"
                          :key="item.id"
                          :label="item.id"
                          :value="item.id"
                        ></el-option>
                      </el-select>
                    </el-form-item>
                    <el-form-item label="期刊编号" prop="journalId">
                      <el-select v-model="postForm.journalId">
                        <el-option
                          v-for="item in journalOptions"
                          :key="item.journalid"
                          :label="item.name"
                          :value="item.journalid"
                        ></el-option>
                      </el-select>
                    </el-form-item>
                    <el-form-item prop="file">
                      <el-upload
                        class="upload-demo"
                        action="/api/file/upload"
                        :on-preview="handlePreview"
                        :on-remove="handleRemove"
                        :before-remove="beforeRemove"
                        :on-exceed="handleExceed"
                        :on-success="handleSuccess2"
                      >
                        <el-button type="primary">点击上传</el-button>
                        <div slot="tip" class="el-upload__tip">只能上传pdf文件</div>
                      </el-upload>
                    </el-form-item>
                  </el-form>
                  <div class="btn-group">
                    <el-button type="success" icon="el-icon-check" @click="handleConfirm">确定</el-button>
                  </div>
                </div>
              </div>
            </el-tab-pane>
            <el-tab-pane label="已投稿列表" name="manuscriptList">
              <div>
                <el-table
                  fit
                  border
                  highlight-current-row
                  :data="list"
                  height="600"
                  @current-change="handleChange"
                  v-loading="pageLoading"
                >
                  <el-table-column type="index" width="80" align="center" label="序号"></el-table-column>
                  <el-table-column label="ID" align="center" prop="msid"></el-table-column>
                  <el-table-column label="内容" align="center">
                    <template slot-scope="scope">
                      <span style="color: red"><a :href="scope.row.content" target="_blank"> 文 章</a></span>
                    </template>
                  </el-table-column>
                  <el-table-column label="描述" align="center" prop="text"></el-table-column>
                  <el-table-column label="状态" align="center" prop="status"></el-table-column>
                  <el-table-column label="审稿人" align="center" prop="reader"></el-table-column>
                  <el-table-column label="类型" align="center" prop="title"></el-table-column>
                  <el-table-column label="期刊" align="center" prop="journal"></el-table-column>
                  <el-table-column label="建议" align="center">
                    <template slot-scope="scope">
                      <div>
                        <el-tag>{{scope.row.suggestions}}</el-tag>
                      </div>
                    </template>
                  </el-table-column>
                  <el-table-column label="操作" align="center">
                    <template slot-scope="scope">
                      <div>
                        <el-button
                          type="success"
                          icon="el-icon-edit"
                          @click="handleReply(scope.row)"
                        >回复修改</el-button>
                      </div>
                    </template>
                  </el-table-column>
                </el-table>
                <el-dialog title="回复修改" :visible.sync="updateDialog" v-loading="dialogLoading">
                  <el-form :model="formData">
                    <el-form-item label="email:">
                      <el-input v-model="formData.email" readonly></el-input>
                    </el-form-item>
                    <!-- <el-form-item label="Id">
          <el-input v-model="formData.msId" readonly></el-input>
                    </el-form-item>-->
                    <el-form-item label="描述">
                      <el-input v-model="formData.text"></el-input>
                    </el-form-item>
                    <el-form-item label="文件">
                      <el-upload
                        class="upload-demo"
                        action="/api/file/upload"
                        :on-success="handleSuccess1"
                      >
                        <el-button type="primary">点击上传</el-button>
                        <div slot="tip" class="el-upload__tip">请重新上传pdf文件</div>
                      </el-upload>
                    </el-form-item>
                  </el-form>
                  <div slot="footer" class="dialog-footer">
                    <el-button @click="updateDialog = false">取消</el-button>
                    <el-button type="success" @click="reply">确定</el-button>
                  </div>
                </el-dialog>
              </div>
            </el-tab-pane>
          </el-tabs>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
import { isPefectInfo } from '@/api/user'
import { getAllJournal } from '@/api/journal'
import {
  getManuscript,
  replyModification,
  commitManiscript
} from '@/api/manuscript'
import ManuscriptList from './components/manuscript-list'
import SendManuscript from './components/send-manuscript'
import UserData from './components/user-data'
const email = localStorage.getItem('email')
export default {
  name: 'UserCenter',
  components: {
    UserData,
    SendManuscript,
    ManuscriptList
  },
  created () {
    this.initData()
    this.getJournal()
    this.isPerfect()
    this.getManuscript()
  },
  data () {
    return {
      email: this.$store.state.user.email !== '' ? this.$store.state.user.email : localStorage.getItem('email'),
      dialogLoading: false,
      activeName: 'userData',
      list: [],
      updateDialog: false,
      formData: {
        email: '',
        text: '',
        msId: '',
        file: ''
      },
      pageLoading: false,
      titleOptions: [
        {
          id: '文学'
        },
        {
          id: '科学'
        },
        {
          id: '医学'
        },
        {
          id: '艺术'
        },
        {
          id: '计算机'
        },
        {
          id: '人文'
        }
      ],
      id: '',
      journalOptions: [],
      status: false,
      postForm: {
        email: this.$store.state.user.email !== '' ? this.$store.state.user.email : localStorage.getItem('email'),
        text: '',
        title: '',
        journalId: '',
        file: ''
      },
      rules: {
        email: [{required: true, message: '此栏不可为空', trigger: 'change'}],
        text: [{required: true, message: '此栏不可为空', trigger: 'change'}],
        title: [{required: true, message: '此栏不可为空', trigger: 'change'}],
        journalId: [{required: true, message: '此栏不可为空', trigger: 'change'}],
        file: [{required: true, message: '此栏不可为空', trigger: 'change'}]
      }
    }
  },
  methods: {
    initData () {
      this.id = this.$store.state.user.id !== '' ? this.$store.state.user.id : localStorage.getItem('userid')
      this.email = this.$store.state.user.email !== '' ? this.$store.state.user.email : localStorage.getItem('email')
    },
    handleClick (tab, event) {
      console.log(tab, event)
    },
    handleSuccess1 (response, file, fileList) {
      this.formData.file = response.data
    },
    handleChange (val) {
      if (val !== null) {
        // console.log(val)
      }
    },
    handleReply (row) {
      // console.log(row)
      axios
        .post(`api/manuscript/getManuscript/${row.msid}`)
        .then(res => {
          console.log(res)
          this.updateDialog = true
          this.formData.email = email
          this.formData.text = res.data.data.text
          this.formData.msId = res.data.data.msid
          // this.formData.file = res.data.data.content
        })
        .catch(() => {})
      // this.formData = row
    },
    reply () {
      this.$confirm('确定修改？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      })
        .then(() => {
          this.dialogLoading = true
          this.pageLoading = true
          replyModification(this.formData)
            .then(res => {
              console.log(res)
              this.$message.success('修改成功')
              this.updateDialog = false
              this.pageLoading = false
              this.dialogLoading = false
              this.getManuscript()
            })
            .catch(() => {
              this.pageLoading = false
              this.dialogLoading = false
            })
        })
        .catch(() => {
          this.pageLoading = false
          this.dialogLoading = false
          this.$message.info('已取消修改')
        })
    },
    getManuscript () {
      this.pageLoading = true
      getManuscript({
        email: this.email
      })
        .then(res => {
          console.log(res)
          this.list = res.data.data
          this.pageLoading = false
        })
        .catch(() => {
          this.pageLoading = false
        })
    },
    getJournal () {
      getAllJournal().then(res => {
        const data = res.data.data
        this.journalOptions = data
      })
    },
    isPerfect () {
      isPefectInfo({
        userid: this.id
      })
        .then(res => {
          console.log(res)
          if (res.data.msg === '用户信息未完善') {
            this.$message.info(
              '您的用户信息未完善，请前往个人中心进行资料完善'
            )
            this.status = false
          } else {
            this.status = true
          }
        })
        .catch(() => {})
    },
    handleConfirm () {
      this.pageLoading = true
      console.log(this.status)
      if (this.status) {
        this.$refs['postForm'].validate(valid => {
          if (valid) {
            commitManiscript(this.postForm)
              .then(res => {
                this.$message.success('提交文章成功')
                this.$refs['postForm'].resetFields()
                this.getManuscript()
                this.pageLoading = false
              })
              .catch(() => {
                this.pageLoading = false
              })
          } else {
            this.pageLoading = false
            return false
          }
        })
      } else {
        this.pageLoading = false
        this.$message.info('您的用户信息未完善，请前往个人中心进行资料完善')
      }
    },
    handleSuccess2 (response, file, fileList) {
      this.postForm.file = response.data
    },
    handleRemove (file, fileList) {
      // console.log(file, fileList)
    },
    handlePreview (file) {
      // console.log(file)
    },
    handleExceed (files, fileList) {
      this.$message.warning(
        `当前限制选择 3 个文件，本次选择了 ${
          files.length
        } 个文件，共选择了 ${files.length + fileList.length} 个文件`
      )
    },
    beforeRemove (file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`)
    }
  }
}
</script>

<style scoped lang="scss">
.app-container {
  padding: 20px;
  width: 100%;
  .form-container{
    padding: 20px;
    width: 50%;
    margin: 0 auto;
    position: relative;
    .btn-group{
      position: absolute;
      right: 20px;
    }
  }
}
.logo {
  background-color: white;
  display: flex;
}
</style>
